<template>
	<view class="page">
        <view class="page-title">消息</view>
        <scroll-view class="page-scroll-view" scroll-y="true" >
			<view class="message-list">
                <Message v-for="item in messageList" :key="item.id"
                    :avatar="base_url + item.avatar"
                    :username="item.username"
                    :msg="item.msg"
                    :time="item.time"
                    :sex="item.sex"
                    :msgCount="item.msgCount"
                />
			</view>
		</scroll-view>
    </view>
</template>

<script setup>
import { base_url } from '../../api/config';

import Message from '../../components/message/Message.vue';

// 消息列表
const messageList = [
	{ id: 1, avatar: '/static/default_avatar.jpg', username: '陈树洞', msg: '你好！我是树洞 2025', time: '2分钟前', sex: '男', msgCount: 2 },
	{ id: 2, avatar: '/static/default_avatar.jpg', username: '陈树洞', msg: '你好！我是树洞 2025', time: '2分钟前', sex: '女', msgCount: 1000 },
	{ id: 3, avatar: '/static/default_avatar.jpg', username: '陈树洞', msg: '你好！我是树洞 2025', time: '2分钟前', sex: '男', msgCount: 2 },
	{ id: 4, avatar: '/static/default_avatar.jpg', username: '陈树洞', msg: '你好！我是树洞 2025', time: '2分钟前', sex: '男', msgCount: 2 },
	{ id: 5, avatar: '/static/default_avatar.jpg', username: '陈树洞', msg: '你好！我是树洞 2025', time: '2分钟前', sex: '男', msgCount: 2 },
];
</script>

<style scoped lang="less">
.page-title {
    text-align: center;
    font-size: 5vw;
    font-weight: 900;
    background-color: rgb(255, 215, 172);
    padding: 20vw 0 10vw;
}

.page-scroll-view {
    box-sizing: border-box;
    width: 100%;
    padding: 3vw;

    &::after {
        content: "";
        display: block;
        width: 100%;
        height: 30vw;
    }
}
</style>




